<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绮梦数字创意网 - 首页完整版</title>
  <!-- 外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#409eff',
            python: '#3776AB',
            java: '#007396',
            mysql: '#00758F',
            light: '#f5f7fa',
            dark: '#333333'
          }
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
    }
  </style>

  <style>
    /* 轮播图核心样式 */
    .carousel-item {
      height: 400px;
      position: relative;
      overflow: hidden;
    }
    .carousel-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 8s ease; /* 缓慢放大效果 */
    }
    .carousel-item:hover .carousel-bg {
      transform: scale(1.05); /* 悬停放大 */
    }
    .carousel-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0 10%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    }

    /* 滚动动画 */
    .fade-in {
      animation: fadeIn 0.8s ease forwards;
      opacity: 0;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
  </style>
</head>

<body class="bg-light font-sans text-dark">
  <div id="app">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center h-16">
          <!-- 左侧Logo和导航 -->
          <div class="flex items-center gap-8">
            <div class="text-2xl font-bold text-primary flex items-center">
              <i class="fa fa-magic mr-2"></i>
              <span>绮梦数字创意网</span>
            </div>
            <nav class="hidden md:flex gap-6">
              <a href="#" class="text-primary font-medium">首页</a>
              <a href="#" class="text-gray-600 hover:text-primary transition">学习中心</a>
              <a href="#" class="text-gray-600 hover:text-primary transition">工具商铺</a>
              <a href="#" class="text-gray-600 hover:text-primary transition">创意对接</a>
              <a href="#" class="text-gray-600 hover:text-primary transition">关于我们</a>
            </nav>
          </div>

          <!-- 右侧功能区 -->
          <div class="flex items-center gap-4">
            <!-- 搜索框 -->
            <div class="relative hidden md:block">
              <input type="text" placeholder="搜索技术/工具/创意" 
                     class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
              <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
            
            <!-- 消息通知 -->
            <div class="relative cursor-pointer text-gray-600 hover:text-primary transition">
              <i class="fa fa-bell text-xl"></i>
              <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
            </div>
            
            <!-- VIP标签 -->
            <div class="hidden md:block px-3 py-1 rounded-full border border-yellow-500 text-yellow-600 text-sm font-medium">
              VIP会员
            </div>
            
            <!-- 用户头像 -->
            <div class="flex items-center gap-2">
              <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-primary">
              <span class="hidden md:inline text-sm font-medium">欢迎老板</span>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-gray-600" @click="mobileMenuOpen = !mobileMenuOpen">
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden bg-white border-t py-3" v-if="mobileMenuOpen">
          <div class="flex flex-col gap-3 px-4">
            <a href="#" class="py-2 text-primary font-medium">首页</a>
            <a href="#" class="py-2 text-gray-600">学习中心</a>
            <a href="#" class="py-2 text-gray-600">工具商铺</a>
            <a href="#" class="py-2 text-gray-600">创意对接</a>
            <a href="#" class="py-2 text-gray-600">关于我们</a>
            <div class="relative mt-2">
              <input type="text" placeholder="搜索技术/工具/创意" 
                     class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
              <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-4 pb-16">
      <!-- 三栏布局：左侧分类 + 中间轮播 + 右侧公告 -->
      <div class="flex flex-col lg:flex-row gap-6 my-6">
        <!-- 左侧功能分类 -->
        <div class="lg:w-1/5 bg-white rounded-xl shadow-sm p-5">
          <h3 class="text-lg font-bold mb-4 pb-2 border-b border-gray-100 flex items-center">
            <i class="fa fa-th-large text-primary mr-2"></i>功能分类
          </h3>
          <div class="grid grid-cols-1 gap-3 mt-4">
            <a href="#" class="flex items-center gap-3 p-3 rounded-lg bg-primary/5 text-primary font-medium card-hover">
              <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                <i class="fa fa-graduation-cap"></i>
              </div>
              <span>学习中心</span>
            </a>
            <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium card-hover">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                <i class="fa fa-shopping-bag"></i>
              </div>
              <span>工具商铺</span>
            </a>
            <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium card-hover">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                <i class="fa fa-comments"></i>
              </div>
              <span>创意对接</span>
            </a>
            <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium card-hover">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                <i class="fa fa-lightbulb-o"></i>
              </div>
              <span>预开项目</span>
            </a>
          </div>

          <!-- 热门技术分类 -->
          <h3 class="text-lg font-bold mb-4 mt-8 pb-2 border-b border-gray-100 flex items-center">
            <i class="fa fa-code text-primary mr-2"></i>热门技术
          </h3>
          <div class="flex flex-wrap gap-2 mt-3">
            <a href="#" class="px-3 py-1 rounded-full bg-python/10 text-python text-sm card-hover">Python</a>
            <a href="#" class="px-3 py-1 rounded-full bg-java/10 text-java text-sm card-hover">Java</a>
            <a href="#" class="px-3 py-1 rounded-full bg-mysql/10 text-mysql text-sm card-hover">MySQL</a>
            <a href="#" class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-sm card-hover">前端开发</a>
            <a href="#" class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-sm card-hover">UI设计</a>
            <a href="#" class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-sm card-hover">数据分析</a>
          </div>
        </div>

        <!-- 中间轮播图（带动画效果） -->
        <div class="lg:w-3/5 bg-white rounded-xl shadow-sm overflow-hidden">
          <el-carousel height="400px" interval="5000" trigger="click" indicator-position="bottom">
            <!-- 轮播图1：核心定位 -->
            <el-carousel-item>
              <div class="carousel-item">
                <img src="https://picsum.photos/id/180/1600/800" class="carousel-bg" alt="技术与创意">
                <div class="carousel-content">
                  <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 fade-in">学实用技术，用工具提效</h2>
                  <p class="text-gray-600 text-lg mb-6 max-w-lg fade-in delay-100">从入门到变现，一站式搞定数字创意之路，让技术真正为你所用</p>
                  <a href="#" class="bg-primary text-white px-6 py-3 rounded-full inline-flex items-center font-medium hover:bg-primary/90 transition fade-in delay-200">
                    立即探索 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
                </div>
              </div>
            </el-carousel-item>

            <!-- 轮播图2：陪伴扶持 -->
            <el-carousel-item>
              <div class="carousel-item">
                <img src="https://picsum.photos/id/26/1600/800" class="carousel-bg" alt="陪伴与扶持">
                <div class="carousel-content">
                  <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 fade-in">陪伴每一步，扶持到成功</h2>
                  <p class="text-gray-600 text-lg mb-6 max-w-lg fade-in delay-100">从技术小白到创意大神，提供教程、工具、订单全链路支持，全程护航你的成长</p>
                  <a href="#" class="bg-primary text-white px-6 py-3 rounded-full inline-flex items-center font-medium hover:bg-primary/90 transition fade-in delay-200">
                    加入我们 <i class="fa fa-user-plus ml-2"></i>
                  </a>
                </div>
              </div>
            </el-carousel-item>

            <!-- 轮播图3：共创理念 -->
            <el-carousel-item>
              <div class="carousel-item">
                <img src="https://picsum.photos/id/42/1600/800" class="carousel-bg" alt="共创与尊重">
                <div class="carousel-content">
                  <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 fade-in">接纳每一份创意，共创辉煌</h2>
                  <p class="text-gray-600 text-lg mb-6 max-w-lg fade-in delay-100">尊重每一个想法，赋能每一份创意，在这里让你的技能与灵感实现真正价值</p>
                  <a href="#" class="bg-primary text-white px-6 py-3 rounded-full inline-flex items-center font-medium hover:bg-primary/90 transition fade-in delay-200">
                    发布创意 <i class="fa fa-lightbulb-o ml-2"></i>
                  </a>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 右侧公告栏 -->
        <div class="lg:w-1/5 bg-white rounded-xl shadow-sm p-5">
          <h3 class="text-lg font-bold mb-4 pb-2 border-b border-gray-100 flex items-center">
            <i class="fa fa-bullhorn text-primary mr-2"></i>最新公告
          </h3>
          <div class="space-y-4 mt-4">
            <div class="border-l-4 border-primary pl-3 py-1 card-hover">
              <p class="text-sm font-medium">Python自动化工具大赛开始报名</p>
              <p class="text-xs text-gray-500 mt-1">2023-10-15</p>
            </div>
            <div class="border-l-4 border-gray-200 pl-3 py-1 card-hover">
              <p class="text-sm font-medium">新用户注册即送3天VIP体验</p>
              <p class="text-xs text-gray-500 mt-1">2023-10-10</p>
            </div>
            <div class="border-l-4 border-gray-200 pl-3 py-1 card-hover">
              <p class="text-sm font-medium">10月创意对接订单量突破500单</p>
              <p class="text-xs text-gray-500 mt-1">2023-10-05</p>
            </div>
            <div class="border-l-4 border-gray-200 pl-3 py-1 card-hover">
              <p class="text-sm font-medium">Java零基础教程全新上线</p>
              <p class="text-xs text-gray-500 mt-1">2023-09-30</p>
            </div>
          </div>

          <!-- 用户数据 -->
          <div class="mt-8 bg-light rounded-xl p-4">
            <h4 class="font-medium mb-3">平台数据</h4>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600">注册用户</span>
                <span class="font-medium">12,580</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">上线工具</span>
                <span class="font-medium">328</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">创意订单</span>
                <span class="font-medium">1,856</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">课程总数</span>
                <span class="font-medium">156</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 作品展示区 -->
      <div class="my-10">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold flex items-center">
            <i class="fa fa-th text-primary mr-2"></i>精选作品展示
          </h2>
          <a href="#" class="text-primary hover:underline flex items-center">
            查看全部 <i class="fa fa-angle-right ml-1"></i>
          </a>
        </div>

        <!-- 作品网格 -->
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
          <div v-for="i in 6" :key="i" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
            <div class="relative h-48 overflow-hidden">
              <img :src="`https://picsum.photos/id/${30+i}/400/300`" alt="作品图片" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
              <div class="absolute top-2 right-2 bg-primary/90 text-white text-xs px-2 py-1 rounded">
                {{ ['Python', 'Java', 'UI设计', '前端'][i%4] }}
              </div>
            </div>
            <div class="p-3">
              <h3 class="font-medium text-sm line-clamp-1">创意作品标题 {{i}}</h3>
              <p class="text-gray-500 text-xs mt-1 line-clamp-1">这是作品的简短描述，展示核心亮点</p>
              <div class="flex justify-between items-center mt-3">
                <span class="text-red-500 font-bold text-sm">￥{{ 9 + i * 2 }}.00</span>
                <div class="flex items-center text-xs text-gray-500">
                  <i class="fa fa-download mr-1"></i> {{ 100 + i * 30 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户评价区 -->
      <div class="my-10 bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-2xl font-bold mb-6 flex items-center">
          <i class="fa fa-comments text-primary mr-2"></i>用户怎么说
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="p-5 border border-gray-100 rounded-lg card-hover">
            <div class="flex text-yellow-400 mb-3">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">"学习中心的Python教程非常实用，跟着做了3个项目就接到了第一单，工具商铺的脚本直接帮我省了80%的时间！"</p>
            <div class="flex items-center">
              <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
              <div>
                <p class="font-medium text-sm">李明 | 设计师</p>
                <p class="text-xs text-gray-500">学习3个月</p>
              </div>
            </div>
          </div>
          <div class="p-5 border border-gray-100 rounded-lg card-hover">
            <div class="flex text-yellow-400 mb-3">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">"通过创意对接接到了Java开发的订单，平台会帮忙审核需求和付款流程，对我们这种新手太友好了，已经赚回学费了！"</p>
            <div class="flex items-center">
              <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
              <div>
                <p class="font-medium text-sm">王华 | 程序员</p>
                <p class="text-xs text-gray-500">入驻6个月</p>
              </div>
            </div>
          </div>
          <div class="p-5 border border-gray-100 rounded-lg card-hover">
            <div class="flex text-yellow-400 mb-3">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star-half-o"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">"作为运营岗，MySQL工具帮我解决了数据查询难题，现在能独立做数据分析报告了，准备再学Python拓展技能！"</p>
            <div class="flex items-center">
              <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
              <div>
                <p class="font-medium text-sm">张婷 | 运营</p>
                <p class="text-xs text-gray-500">使用工具2个月</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 核心模块引导 -->
      <div class="my-10">
        <h2 class="text-2xl font-bold mb-8 text-center">我们能为你做什么</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
              <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">系统学习路径</h3>
            <p class="text-gray-600 mb-4">从零基础到实战高手，Python/Java/MySQL等技术循序渐进，配套练习+答疑</p>
            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
              进入学习中心 <i class="fa fa-arrow-right ml-1"></i>
            </a>
          </div>
          <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
              <i class="fa fa-wrench text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">高效工具集合</h3>
            <p class="text-gray-600 mb-4">自动化脚本、数据处理模板、代码生成器，直接下载使用，提升工作效率</p>
            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
              逛工具商铺 <i class="fa fa-arrow-right ml-1"></i>
            </a>
          </div>
          <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
              <i class="fa fa-exchange text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">技能变现平台</h3>
            <p class="text-gray-600 mb-4">发布技术需求、承接订单，Python/Java等技能直接转化为收入</p>
            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
              去创意对接 <i class="fa fa-arrow-right ml-1"></i>
            </a>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <div class="flex items-center gap-2 mb-4">
              <i class="fa fa-magic text-primary text-2xl"></i>
              <span class="text-xl font-bold">绮梦数字创意网</span>
            </div>
            <p class="text-gray-400 text-sm mb-4">专注数字创意领域，提供技术学习、工具支持、创意对接一站式服务，陪伴每一位创作者成长。</p>
            <div class="flex gap-4">
              <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa fa-weixin text-xl"></i></a>
              <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa fa-weibo text-xl"></i></a>
              <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa fa-github text-xl"></i></a>
            </div>
          </div>
          <div>
            <h4 class="font-bold mb-4">快速导航</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="text-gray-400 hover:text-primary transition">首页</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">学习中心</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">工具商铺</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">创意对接</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">关于我们</a></li>
            </ul>
          </div>
          <div>
            <h4 class="font-bold mb-4">技术分类</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="text-gray-400 hover:text-python transition">Python</a></li>
              <li><a href="#" class="text-gray-400 hover:text-java transition">Java</a></li>
              <li><a href="#" class="text-gray-400 hover:text-mysql transition">MySQL</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">前端开发</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition">UI设计</a></li>
            </ul>
          </div>
          <div>
            <h4 class="font-bold mb-4">联系我们</h4>
            <ul class="space-y-3 text-sm">
              <li class="flex items-center gap-2 text-gray-400">
                <i class="fa fa-weixin"></i>
                <span>qimeng_creative</span>
              </li>
              <li class="flex items-center gap-2 text-gray-400">
                <i class="fa fa-envelope"></i>
                <span>contact@qimeng.com</span>
              </li>
              <li class="flex items-center gap-2 text-gray-400">
                <i class="fa fa-phone"></i>
                <span>400-123-4567</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
          © 2023 绮梦数字创意网 版权所有 | 京ICP备12345678号-1
        </div>
      </div>
    </footer>
  </div>

  <script>
    // 初始化Vue实例
    new Vue({
      el: '#app',
      data() {
        return {
          mobileMenuOpen: false
        }
      },
      mounted() {
        // 监听滚动，添加导航栏阴影
        window.addEventListener('scroll', () => {
          const header = document.querySelector('header');
          if (window.scrollY > 10) {
            header.classList.add('shadow');
          } else {
            header.classList.remove('shadow');
          }
        });

        // 轮播图动画初始化
        const carousel = document.querySelector('.el-carousel');
        carousel.addEventListener('change', () => {
          // 每次切换轮播时重新触发动画
          setTimeout(() => {
            const items = document.querySelectorAll('.fade-in');
            items.forEach(item => {
              item.style.animation = 'none';
              setTimeout(() => {
                item.style.animation = '';
              }, 10);
            });
          }, 100);
        });
      }
    });
  </script>
</body>
</html>